<include file="Common:layout" />
<style type="text/css">
    .true_amt {margin:20px 0 15px 0;font-size:16px;}
    .analysis_div {height:400px;border:1px solid #61A0A8;float:left;width:47%;}
</style>
<body style="background-color: rgb(255, 255, 255); overflow: auto; cursor: default; -moz-user-select: inherit;">
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div class="page">
    <div class="fixed-bar">
        <div class="item-title">
            <div class="subject">
                <h3>订单概况</h3>
                <h5>商城所有订单概况分析</h5>
            </div>
        </div>
    </div>
    <div class="flexigrid">
        <div class="mDiv">
            <form action="{:U('Report/order')}" class="navbar-form form-inline" method="post">
                <div class="sDiv">
                    <div class="sDiv2">
                        <input type="text" placeholder="开始时间" class="w150" id="st" name="st"/>
                        <input type="text" placeholder="结束时间" class="w150" id="et" name="et"/>
                        <input type="submit" class="btn" value="搜索"/>
                    </div>
                </div>
            </form>
        </div>

        <div class="hDiv">
            <div class="hDivBox">
                <p class="true_amt red_common">有效订单总金额：￥{$amt_count}元</p>
                <div id="report_order" class="analysis_div"></div>
                <div id="report_order_amt" class="analysis_div"></div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="__PUBLIC__/usr/js/layer/laydate/laydate.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Admin/echarts.min.js"></script>
    <script type="text/javascript">
        $('#st').layDate();
        $('#et').layDate();

        var myChartNum = echarts.init(document.getElementById('report_order'));
        // 指定图表的配置项和数据
        var optionNum = {
            title : {
                text: '单量统计',
                subtext: '',
                x:'left'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: ['已完成','已确认','待确认','已取消']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '50%',
                    center: ['50%', '60%'],
                    data:[
                        {value:"{$complete_orders}", name:'已完成'},
                        {value:"{$confirm_orders}", name:'已确认'},
                        {value:"{$for_confirm_orders}", name:'待确认'},
                        {value:"{$calcel_orders}", name:'已取消'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartNum.setOption(optionNum);

        var myChartAmt = echarts.init(document.getElementById('report_order_amt'));
        // 指定图表的配置项和数据
        var optionAmt = {
            title : {
                text: '金额统计',
                subtext: '',
                x:'left'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: ['已完成','已确认','待确认','已取消']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '50%',
                    center: ['50%', '60%'],
                    data:[
                        {value:"{$complete_amts}", name:'已完成'},
                        {value:"{$confirm_amts}", name:'已确认'},
                        {value:"{$for_confirm_amts}", name:'待确认'},
                        {value:"{$calcel_amts}", name:'已取消'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartAmt.setOption(optionAmt);
    </script>
</body>
</html>